<template>
	<div id="Comment">
		<h1>评论</h1>
		<div class="ins" >
			<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" ></el-avatar>
			<div style="margin-left: 5px;">
				<el-input
				  style="width: 690px;"
				  type="textarea"
				  :rows="3"
				  placeholder="请输入评论..."
				  v-model="content">
				</el-input>
			</div>
		</div>
		<div style="width:800px;margin-top: 3px;margin-bottom: 62px;">
			<div class="pubs" style="float: right; width:150px;margin: 7px 0;">
				<el-button type="primary" @click.native="send_comment">提交评论</el-button>
			</div>
		</div>	
		<h1>全部评论</h1>
		<div id="cmt_list" v-for="(item,index) in cmtres" >
			<li id="CmtItem">
				<div class="CmtItem">
					<div style="margin:20px 10px;">
						<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" ></el-avatar>
					</div>
					<div style="margin:20px 10px;">
						<div style="font-size: 14px;margin: 6px 0;">
							<span >{{cmtors[index].nickname}}</span>
						</div>
						<br>
						<div style="font-size: 16px;">
							<span >{{item.cmt_content}}</span>
						</div>
						
					</div>
				</div>
				<el-badge :value="0" class="item">
				  <el-button size="small">点赞</el-button>
				</el-badge>
				<el-badge :value="1" class="item">
				  <el-button size="small">评论</el-button>
				</el-badge>
			</li>
		</div>
	</div>
</template>

<script>
	import {postComment} from 'network/detail.js'
	
	export default{
		name:"Comment",
		data(){
			return {
				content:'',
				userinfo:null
			}
		},
		inject:["reload"],
		props:{
			art_id:0,
			cmtors:[] ,//评论者数据,
			cmtres:[] //评论数据
		},
		methods:{
			send_comment(){
				postComment(this.art_id,this.content,this.common.token).then(res=>{
					// if()
					if(res.status == 0){
						alert('评论发表成功！')
						}
					else if(this.common.isLogin !== true)
						return alert('您尚未登录！')
					else
						return alert('评论发表失败，请检查您的网络并稍后再试！')
					
					this.reload()
				})
			}
		}
	}
</script>

<style scoped>
	li{
		list-style-type: none;
	}
	#Comment{
		box-sizing: border-box;
		width: 90%;
		margin: 15px auto;
		border-radius: 5px;
		background-color: #fff;
		padding-left: 30px;
		padding-top: 10px;
		font-size: 11px;
	}
	.ins{
		display: flex;
		vertical-align: middle;
		align-items: center;
		line-height: 30px;
		margin-top: 30px;
	}
	.CmtItem{
		display: flex;
	}
	.item {
	  margin-top: 10px;
	  margin-right: 40px;
	}
</style>
